<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	1.计算属性
        		在computed属性对象中定义计算属性的方法
        		在页面中使用{{方法名}}来显示计算的结果
        	2.监视属性
        		通过vm对象的$watch()或watch配置来监视指定的属性
        		当属性发生变化时, 回调函数自动调用, 在函数内部进行计算
        	3.计算属性高级
        		通过getter/setter实现对属性数据的显示和监视
        		计算属性存在缓存, 多次读取只执行一次getter计算
        -->
		<div id="demo">
			姓: <input type="text" placeholder="First Name" v-model="firstName"/>
			名: <input type="text" placeholder="Last Name" v-model="lastName"/>
			姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"/>
			姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"/>
			姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"/>
		</div>
		
		<script type="text/javascript" src="js/vue.js"></script>
		<script>
			const vm = new Vue({
				el:"#demo",
				data: {
					firstName: "A",
					lastName: "B",
					fullName2: "A B"
				},
				computed: {
					// 什么时候执行: 初始化显示/相关的data属性数据发改变
					// 计算并返回当前属性的值
					fullName1(){ // 计算属性中的一个方法, 方法的返回值作为属性值
						console.log("fullName1()")
						return this.firstName + " " + this.lastName
					},
					fullName3: {
						// 1.你定义了  2.你没有调用  3.但最终它执行了
						// 1.什么时候调用  2.用来做什么
						// 回调函数  当需要读取当前属性值时回调, 根据相关数据计算并返回当前属性的值
						get(){
							return this.firstName + " " + this.lastName
						},
						// 回调函数 监视当前属性值的变化, 当属性值发生改变时回调, 更新相关的属性数据
						set(value){  // value及时fullName2的最新属性值
							const names = value.split(" ")
							this.firstName = names[0]
							this.lastName = names[1]
						}
					}
				},
				watch: { // 配置监视
					firstName: function(value){ // firstName发生了变化
						console.log(this)  // 就是vm对象
						this.fullName2 = value + " " + this.lastName
					}
				},
			})
			
			vm.$watch("lastName", function(value){
				// 更新fullName2
				this.fullName2 = this.firstName + " " + value
			})
		</script>
	</body>
</html>
